<template>
   <div class="content">
        <TableLayout form-title="">
            <el-form :model="addData"  class="formInline" :rules="rulesAdd" ref="addData"  label-width="120px" slot="form">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="字典类型" prop="wordType">
                          <el-select v-model="addData.wordType" placeholder="请选择字典类型" 
                          style="width:100%">
                                <el-option v-for="(item,index) in wordTypeArr" 
                                :key="index" :label="item.name" 
                                :value="item.value"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="formBtn">
                    <div class="btnPosition">
                        <el-button type="primary" @click="search">查询</el-button>
                    </div>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <span class="table-title-span">查询列表</span>
                <div class="btnPosition">
                    <el-button @click="deleteRoleLots">批量删除</el-button>
                    <el-button @click="showAdd">添加</el-button>
                </div>
            </div>
            <el-table :data="AnnounceList" style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable" v-loading="loading">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column align="left" label="字典编号" prop="pId" min-width="240">
                </el-table-column>
                <el-table-column align="left" label="字典名称" prop="sName" min-width="120">
                </el-table-column>
                <el-table-column align="left" label="字典描述"  prop="sDesc" min-width="130">
                </el-table-column>
                <el-table-column align="left" label="其他操作" min-width="220">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="correctRow(scope.row)">修改</el-button>
                        <el-button type="text" class="btn-success" @click="deleteListOne(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" 
                :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
       <!-- <addAndCorrect ref="addAndCorrect" :addData="addData" @search-list="searchProvice"> </addAndCorrect> -->
       <addAndCorrect :addData="addData"  @searchList='search'> </addAndCorrect>
  
    </div>
</template>
<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import addAndCorrect from './addAndCorrect';
import { queryAllDict, deleteDicts} from 'api/system';
export default {
    components: { TableLayout, addAndCorrect },
    data() {
        return {
            addData: {// 查询 表单数据
                wordType: 1,
                dialogAdd: false,
                wordNum: '',
                wordName: '',
                wordDetail: '',
                popTitle: '',
                status: 1,
                isDisabled: false, // 是否告诉弹框禁用编号的输入框
                autoWarn: ''
                // type: ''
            },
            AnnounceList: [],
            multipleSelection: [], // 勾选的表格的项目
            wordTypeArr: [{name: '科目字典', value: 1}],
            loading: false, // 查询时的加载提示
            listQuery: { // 分页
                page: 1,
                total: 0
            },
            rulesAdd: {
                wordType: [{ required: true, message: '请选择字典类型', trigger: 'blur' }]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['uid'])
    },
    created() {
        //console.log(1);
        // this.allDictType();
        this.searchFetchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
         // 单个删除教师
        deleteListOne(row) {
            this.$confirm('确定删除该条数据？', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', // warning
                title: '  '
            }).then(() => {
                let ids=row.pId;
                this.detele(ids);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 批量删除教师信息  传老师id数组
        deleteRoleLots() {
            let ids = '';
            for (let i = 0; i < this.multipleSelection.length; i++) {
                ids += this.multipleSelection[i].pId + ',';
            }
            ids = ids.substring(0, ids.length - 1)
            if (ids.length == 0) {
                this.$message({
                    type: 'info',
                    message: '没有要删除的文件!'
                });
                return;
            }
            this.$confirm('此操作将批量删除选中权限, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
                // type: 'warning'
            }).then(() => {
                this.detele(ids);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 删除
        detele(ids) {
            deleteDicts(ids).then(res => {
                this.$message({        
                    type: 'success',
                    message: '已删除!'
                });
                this.searchFetchData();
            });
        },
       
        // 查询所有字典列表
        searchFetchData() {
            let type=this.addData.wordType;
            let curPage = this.listQuery.page;
            let pageSize = this.config.pageSize;
            this.loading = true;
            queryAllDict(type, curPage, pageSize).then(res => {
                //console.log('获取字典列表！');
                this.AnnounceList=res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
                this.loading = false;

            });
        },
        // 查询该字典列表
        search() {
            this.searchFetchData();
        },
    // 添加和修改
        showAdd() {
            //console.log('点击添加！');
            this.addData.autoWarn='自动生成';
            this.addData.isDisabled=true;
            this.addData.dialogAdd = true;
            this.addData.popTitle='添加字典',
            this.addData.status=1
        },
        correctRow(row) {
            this.addData.autoWarn='';
            this.addData.isDisabled=false;
            this.addData.dialogAdd = true;
            this.addData.popTitle='修改字典',
            this.addData.status=2,
            this.addData.wordNum=row.pId,
            this.addData.wordName=row.sName,
            this.addData.wordDetail=row.sDesc,
            this.addData.type=row.sType
        },
       
        // 弹出框的关闭按钮
        handleClose() {
            this.delDialogAdd();
        },
        resetFormdelDialogAdd() {
            this.delDialogAdd();
        },
        // 还原弹窗信息
        delDialogAdd() {
            // this.addData.dialogAdd = false;
            this.addData={// 查询 表单数据
                wordType: '',
                dialogAdd: false,
                wordNum: '',
                wordName: '',
                wordDetail: '',
                popTitle: '',
                status: 1,
                isDisabled: false, // 是否告诉弹框禁用编号的输入框
                autoWarn: ''
            }
        },
       
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss">
@import '../../style/dialog.scss';
.el-message-box{
    .el-message-box__content{
        padding:20px 0px 30px;
        .el-message-box__message {
            p {
                font-size: 18px;
                color: #333;
                text-align: center;
            }
        }
    }
    .el-message-box__btns {
        text-align: center;
        padding-bottom:30px;
    }
}

.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
  
}
</style>

